<template>
    <div>
        <div class="row">
            <div class="card" v-for="users in info.user " :key="users.login">
                <a :href="users.html_url" target="_blank">
                    <img :src="users.avatar_url" style='width: 100px' />
                </a>
                <p class="card-text">{{users.login}}</p>
                <!-- 第一次进来显示 -->

            </div>
            <h1 v-show="info.IsFirst">欢迎使用查询用户</h1>
            <!-- 加载中显示 -->
            <h1 v-show="info.IsLoading">加载中</h1>
            <!-- 加载失败 -->
            <h1 v-show="info.errormsg">{{info.errormsg}}</h1>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'List',
        data() {
            return {
                info: {
                    IsFirst: true,
                    IsLoading: false,
                    errormsg: '',
                    user: []
                }

            }
        },
        mounted() {
            this.$bus.$on('getusers', (todoobj) => {
                console.log('我是List收到了users消息');
                this.info = todoobj
            })
        },
    }
</script>
<style>
    .album {
        min-height: 50rem;
        /* Can be removed; just added for demo purposes */
        padding-top: 3rem;
        padding-bottom: 3rem;
        background-color: #f7f7f7;
    }

    .card {
        float: left;
        width: 33.333%;
        padding: .75rem;
        margin-bottom: 2rem;
        border: 1px solid #efefef;
        text-align: center;
    }

    .card>img {
        margin-bottom: .75rem;
        border-radius: 100px;
    }

    .card-text {
        font-size: 85%;
    }
</style>